<template>
  <div :class="className" :style="{height:height,width:width}" style="margin-top: -30px;" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  const animationDuration = 6000

  export default {
    mixins: [resize],
    props: {
      hourlyCounts: {
        type: Array,
        default: []
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
          },
          yAxis: {
            type: 'value'
          },
          dataZoom: [{
            type: 'inside', // 内置缩放组件
            start: 0, // 初始缩放范围的起始百分比
            end: 100 // 初始缩放范围的结束百分比
          }],
          series: [{
            // data: [820, 932, 901, 934, 1290, 1330, 1320,1000,1100,1100,1100,1100,1200,1100,1100,1100,1100,1500,1100,1100,1100,1600,1100,1100,1100],
            data: this.hourlyCounts,
            type: 'line',
            areaStyle: {}
          }]

        })
      }
    }
  }
</script>
